<template>
  <div style="width : 100%">
    <!--    blur 是输入框输入结束  鼠标离开输入框  再发生改变-->
    <!--    change 用于下拉框，日期选择框等  只要选了新的数据 就发生改变-->
    <el-form :model="form" :rules="rules" label-position="top" width="800px" label-suffix=":" label-width="100px"
             ref="myForm" :inline="true">
      <el-row>
        <el-col :span="12">
          <el-form-item label="活动名称" prop="name">
            <el-input type="text" v-model="form.name"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="安全代码6位" prop="code">
            <el-input type="password" v-model="form.code" show-password/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="确认安全代码" prop="checkCode">
            <el-input type="password" v-model="form.checkCode" show-password/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动时间" prop="myDate">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.myDate" :picker-options="picker_options"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input type="text" v-model="form.email"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input type="text" v-model="form.phone"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="温度(单位/°C)" prop="temperature">
            <el-input type="number" v-model="form.temperature" maxlength="4"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-button type="primary" @click="submit(myForm)">提交</el-button>
      <el-button @click="reset">重置</el-button>
    </div>

    <span>分栏间隔 有效</span>
    <el-row :gutter="24">
      <el-col :span="8">
        <div>示例3</div>
      </el-col>
      <el-col :span="8">
        <div>示例3</div>
      </el-col>
      <el-col :span="8">
        <div>示例3</div>
      </el-col>
    </el-row>
    <el-divider></el-divider>

  </div>
</template>

<script>
export default {
  name: "myTest",
  data() {
    const validateCode = (rule, value, callback) => {
      if (value === '' || value === undefined) {
        callback(new Error('请输入安全代码'));
      } else {
        if (this.form.checkCode !== '') {
          this.$refs['myForm'].validateField('checkCode');
        }
        callback();
      }
    };
    const validateCheckCode = (rule, value, callback) => {
      if (value === '' || value === undefined) {
        callback(new Error('请再次输入安全代码'));
      } else if (value !== this.form.code) {
        callback(new Error('两次代码不一致'));
      } else {
        callback();
      }
    };
    return {
      form: {
        name: undefined,
        code: undefined,
        checkCode: undefined,
        myDate: undefined,
        email: undefined,
        phone: undefined,
        temperature: undefined,
      },
      rules: {
        name: [{required: true, message: '活动名称不能为空', trigger: 'blur'}, {
          min: 3, max: 10, message: '长度在3-10个字符', trigger: 'blur'
        }],
        code: [{validator: validateCode, trigger: 'blur'}],
        checkCode: [{validator: validateCheckCode, trigger: 'blur'}],
        myDate: [{type: 'date', required: true, message: '活动日期不能为空', trigger: 'change'}],
        email: [{required: true, message: '邮箱地址不能为空', trigger: 'blur'},
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }],
        phone: [
          {required: true, message: '手机号码不能为空', trigger: 'blur'},
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }],
        temperature: [{required: true, message: '温度不能为空', trigger: 'blur'}],
      },
      picker_options: {
        disabledDate(time) {
          return time.getTime() <= new Date()
        }
      },
    }
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('提交成功')
        } else {
          this.$message.info('提交失败')
          return false
        }
      })
    },
    reset() {
      /*  this.form = {
          name: undefined,
          code: undefined,
          myDate: undefined,
          email: undefined,
          phone: undefined,
          temperature: undefined,
        }*/
      Object.assign(this.$data.form, this.$options.data.call(this).form)
    },
    // 限制小数
    formatNum() {
      let t = this.form.temperature
      console.log(t)
      let input = t.toString().replace(/[^\d.]/g, "")
      if (input.split('.').length >= 2) {
        input = input.split('.')[0] + '.' + input.split('.')[1]
      }

      let reg = /^[+-]?(0|([1-9]\d*))(\.\d{1})?$/
      if (reg.test(input)) {
        this.form.temperature = input
      } else {
        this.form.temperature = undefined
      }
    },
  }
}
</script>

<style scoped>

div {
  width: 70%;
  height: 100%;
}

.el-input {
  width: 35%;
}

.el-table-picker {
  width: 25%;
}

</style>
